<template>
  <view class="ui-checkbox" :class="[active && 'active']" @click="$emit('click')" />
</template>

<script lang="ts" setup>
// #region Props
defineProps<{ active: boolean }>()
// #endregion
// #region Emits
defineEmits(['click'])
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss">
.ui-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  box-sizing: border-box;
  border: 2px solid var(--checkbox-border-color);
  background: var(--card-border-color);
  &.active {
    border-color: var(--main-light-color);
    background: url('https://mp-faaaa8a0-2641-45b8-8dbc-bcb0d1463eb4.cdn.bspapp.com/app/icon-checked.png') no-repeat
      center rgba(236, 249, 104, 0.5);
    background-size: 14px 10px;
  }
}
</style>
